import { System,LocalTime } from "../global.slint";

export component HomePage inherits Rectangle{
    width: System.screen_width;
    height: System.screen_height;
    // 背景图片
    bg:=Image {
        source: @image-url("../../assets/bg_ndmz.png");
    }

    animate x {
         easing: ease-in-out;
         duration: 300ms;
    }


    VerticalLayout {
        spacing: 4px;
        alignment: start;

        week:=HorizontalLayout{
            padding-top: 20px;
            alignment: center;
            spacing: 5px;
            Text {
                text: LocalTime.month;
                color: white;
                font-size: 20px;
            }
            Text {
                text: LocalTime.week_cn;
                color: white;
                font-size: 20px;
            }

        }

        time:=HorizontalLayout {
                padding: 2px;
                spacing: 5px;
                alignment: center;
                Rectangle {
//                    background: blue;
                    Text {
                        text: LocalTime.hour;
                        font-size: 60px;
                        color: white;
                        font-weight: 500;
                    }
                }
                Text {
                    width: 20px;
                    text: ":";
                    font-size: 60px;
                    color: white;
                    font-weight: 500;
                }
                Rectangle {
//                    background: pink;
                    Text {
                        text: LocalTime.minute;
                        font-size: 60px;
                        color: white;
                        font-weight: 500;
                    }
                }

        }
    }

    Timer {
        running: true;
        interval: 1s;
        triggered => {
            LocalTime.minute+=1;
        }
    }

}